<!--  -->
<template>
  <div class='classify-page'>
    <van-search v-model="value" placeholder="搜索藏品" shape="round"  disabled @click="searchTo"/>
    <div class="classify-content flex">
      <div class="classify-left" ref="classifyArr"  style="overflow: hidden;">
        
        <div class="left-box" v-if="classifyArr.length > 1">
          <div :class="classifyIndex === -1? 'on':''" @click="letterOn">{{ $i18n.t("category.推荐分类") }}</div>
          <block v-for="(item,index) in classifyArr" :key="index" >
            <div  :class="classifyIndex === index ? 'on':''" @click.capture="classifyOnText(index,item.id,$event)">{{item.name}}</div>
          </block>
        </div>
      </div>
      <div class="container">
        <!-- 分类下拉框 -->
        <div class="catagoryBox" >
          <van-collapse v-model="activeName" :border="false" @change="titleChange">
            <van-collapse-item name="1" >
              <div slot="title" class="activetitle">
                <!-- 自定义标题 -->
                <dl v-show="!fun.isTextEmpty(showTitle)">
                  <dt v-for="(o, index) in showTitle" :key="index" :class="o.id == secondaryId ? 'addClass' : 'removeClass'" @click.stop="chooseSecondary(o.id,o.level)">{{ o.name }}</dt>
                </dl>
                <span v-show="fun.isTextEmpty(showTitle)">{{ $i18n.t("category.选择分类") }}</span>
              </div>
              <div style="overflow-y: scroll; max-height: 32vh;">
                <dl>
                  <dt v-for="(Secondary, index) in secondArr" :key="index" :class="Secondary.id == secondaryId ? 'addClass1' : 'removeClass1'" @click.stop="chooseSecondary(Secondary.id,Secondary.level)">
                    {{ Secondary.name }}
                  </dt>
                  <dt v-show="isCategoryMore" @click.stop="getMoreData_1(0)" class="more-btn-class">查看更多<i class="iconfont icon-member-bottom"></i></dt>
                </dl>
              </div>
              <div class="f-10 c-bbb flex-c mt-18" @click.stop="activeName=[]">点击收起 <i class="iconfont icon-member-bottom"></i></div>

              <p v-if="fun.isTextEmpty(secondArr)">{{ $i18n.t("category.暂无其他分类") }}</p>
            </van-collapse-item>
          </van-collapse>
        </div>
        <c-sort :show="true"  @sortIn="sortOut" :pluginType="pluginType"></c-sort>
        <div ref="handpickList" class="classify-main" style="overflow: hidden;">
          <div class="coverLayer" v-if="this.activeName == '1'" @click="maskChange"></div>
          <div  class="classify-box flex"  v-if="classifyList.length > 0">
              <goods-item :item="item" :index="index" className="classify" v-for="(item,index) in classifyList" :key="index" >
                <template v-slot:classify>
                  <div class="flex flex-j-sb classify">
                    <p class="price"><span>￥</span>{{item.price}}</p>
                    <!-- <div class="select">
                      <span class="iconfont icon-gouwuche2"></span>
                    </div> -->
                  </div>
                </template>
              </goods-item>
            <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
          </div>
          <van-empty description="暂无数据" v-else />
        </div>
      </div>
      
    </div>
    <!-- <div class="h-50"></div> -->
    <div class="foo-view" @click.stop="goodsNav">
      <div class="iconfont icon-shuzicangpin"></div>
    </div>
  </div>
</template>

<script>
import classify_controller from "./classify_controller";
export default classify_controller;
</script>
<style scoped>
  .catagoryBox ::v-deep .van-cell__title{
    overflow: hidden;
  }
  ::v-deep   .pcStyle .classify-page .foo-view {
    margin: 0px auto;
  }
  /* ::-webkit-scrollbar {
    display: none;
  } */
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .h-50 {
    height: 50px;
    clear: both;
  }
  .van-collapse::after {
    border: none;
  }

  .van-collapse-item__content {
    padding: 12px 10px;
  }

  .classify-page {
    position: relative;
  }
  .catagoryBox {
      // overflow: hidden;
      position: relative;
      // height: 2.8125rem;
      z-index: 999;

      .threeTitle {
        height: 2rem;
        line-height: 2rem;
        font-size: 0.75rem;
        color: #202020;
        text-align: left;
      }

      dl {
        display: flex;
        flex-wrap: wrap;

        dt {
          min-width: 58px;
          font-size: 12px;
          line-height: 12px;
          padding: 8px;
          border-radius: 4px;
          margin-right: 8px;
          margin-bottom: 8px;
          color: #696969;
          background: #f8f8f6;
        }

        .addClass,
        .addClass1 {
          color: #fb4a4a;
          background-color: rgba($color: #f15353, $alpha: 0.1);
        }

        .three-btn {
          padding: 0 24rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 11px;
          border-radius: 2px;
          border: 1px solid #fff;
          background: #fff;
        }

        .three-addClass {
          color: #f15353;
          border: 1px solid #f15353;
        }

        .more-btn-class {
          background: transparent;
          border: none;
          color: #fb5050;
          display: flex;
        }
      }

      .activetitle {
        overflow-x: auto;

        dl {
          flex-wrap: nowrap;

          dt {
            flex-shrink: 0;
            margin-bottom: 0;
            // height: 12px;
            // line-height: 12px;
          }
        }
      }
  }
  .coverLayer {
    //遮盖层
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    z-index: 99;
  }
  .container {
    width: calc(100% - 80px);
    height: 97vh;
  }

  .classify-content {
    // margin: 13px 0 0 0;
    position: relative;

    .classify-left {
      background-color: #fafafa;
      min-width: 80px;
      width:80px;
      height: 102vh;

      .left-box {
        padding: 0 0 50px 0;

        div {
          padding: 19px 10px;
          text-align: center;
          font-size: 13px;
          color: #3b3b4a;
          text-align: left;
        }
        .on {
          background: #fff;
          position: relative;
          color:var(--themeBaseColor);

          &::after {
            position: absolute; // 相对于父元素进行绝对定位
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            width: 3px;
            height: 20px;
            background: var(--themeBaseColor);
            border-radius: 15px 15px 15px 15px;
          }
        }
      }
    }
    .classify-main {
      box-sizing: border-box;
      width: calc(100%);
      height: 90vh;
      background-color: #fff;
      // padding:0 0 50px 0;
      // flex:1;
      // margin: 0 13px;
      position: relative;

      .classify-box {
        width:100%;
        box-sizing: border-box;
        padding: 0 0 50px 0;
        flex-wrap: wrap;
        cursor: pointer;
        // white-space: nowrap;
        // flex-direction: column;
        .goods-item {
          width:100%;
          box-sizing: border-box;
          border-radius: 0;
          padding:12px 12px 3px 12px;
          margin:0;
        }
      }
    }
  }
  .foo-view {
    position: fixed;
    z-index: 10;
    right:12px;
    bottom:124px;
    padding:8px;
    border-radius: 50%;
    background-color: rgba($color: #000000, $alpha: 0.7);
    .icon-shuzicangpin {
      color: #fff;
      font-size: 28px;
    }
  }
</style>